<template>
  <el-row>
    <el-col class="el-col" :span="12" :offset="6">
      <!-- <header-com @click="add"></header-com> -->
      <header-com @add="add"></header-com>
      <hr />
      <list-com :todoList="todoList" :del="del" :changeFlag="changeFlag"></list-com>
      <hr />
      <footer-com :all="todoList.length" :selectNum="selectNum" :allSelectIsOrNo="allSelectIsOrNo" :allSelectTodoList="allSelectTodoList" :selectAllDel="selectAllDel"></footer-com>
    </el-col>
  </el-row>
  <!-- <is-xiang-ying></is-xiang-ying> -->
  <IsXiangYing></IsXiangYing>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs,ref,watch } from 'vue';
import HeaderCom from './components/HeaderCom.vue';
import ListCom from './components/ListCom.vue';
import FooterCom from './components/FooterCom.vue';
import IsXiangYing from './components/IsXiangYing.vue';

import { todo } from './types/todo';
import { computed } from '@vue/reactivity';
export default defineComponent({
  setup() {
    const todoList = reactive<todo[]>([
      {
        id: 0,
        title: '吃饭',
        flag: false,
      },
      {
        id: 1,
        title: '睡觉',
        flag: false,
      },
      {
        id: 2,
        title: '打豆豆',
        flag: false,
      }
    ]);
    const add = (title:string) =>{
      todoList.push({
        id:todoList.length,
        title,
        flag:false,
      });
    };
    const del = (index:number) =>{
      todoList.splice(index,1);
    };
    const changeFlag = (todo:todo,value:boolean) =>{
      todo.flag = value;
      console.log(todoList);
      
    };
    const selectNum = ref<number>(0);
    watch(
      todoList,
      (value) =>{
        console.log(value);
        selectNum.value = value.reduce((pre,item) =>{
          return item.flag == true ? pre + 1 :pre;
        },0);
        
      },
      {
        deep:true,
        immediate:true,
      },
    );
    const allSelectIsOrNo = computed(() =>{
      return selectNum.value == todoList.length ? true : false;
    });
    const allSelectTodoList = (value:boolean) =>{
      todoList.forEach((item)=> {
        item.flag = value;
      });
    };
    const selectAllDel = () =>{
      const arr = todoList.filter((item) =>{
        return item.flag == false;
      });
      todoList.length = 0;
      arr.forEach((item) =>{
        todoList.push(item);
      });
    };
    return {
      todoList,
      add,
      del,
      changeFlag,
      selectNum,
      allSelectIsOrNo,
      allSelectTodoList,
      selectAllDel,
    };
  },
  components: { HeaderCom, ListCom, FooterCom,IsXiangYing }
})
</script>

<style scoped>

</style>
